<template>
	<view class="container bg-drak" :class="{ 'margin-bottom-big': !empty }">
		<!-- 00. 空白页 -->
		<use-empty v-if="empty" e-style="round" e-type="cart" tip="购物车数据为空" height="70vh"></use-empty>
		<!-- 00. 列表 -->
		<block v-else>
			<!-- 01. 购物车列表 -->
			<view class="cart-list padding-sm">
				<block v-for="(item, index) in datas" :key="item._id">
					<view class="cart-item bg-main margin-bottom-sm padding-lg pos-r dflex-s border-radius">
						<view class="image-wrapper pos-r">
							<!-- 商品图片 -->
							<image class="border-radius-xs wh-full border-radius-sm" mode="aspectFill" lazy-load
								:src="item.goods_img">
							</image>
							<!-- 选中|未选中按钮 -->
							<view class="iconfont checkbox pos-a bg-main border-radius-big"
								:class="{active: item.checked, iconxuanzhongzhuangtai: item.checked, iconweixuanzhongzhuangtai: !item.checked}"
								@tap.stop="check('item', index)"></view>
						</view>
						<view class="item-right padding-left pos-r flex1">
							<!-- 商品名称 -->
							<view class="clamp-2 title">{{item.goods_name}}{{ item.goods_sku_name || '&nbsp;&nbsp;' }}
							</view>
							<view class="ft-dark fs-xs padding-top-xs">库存{{ item.goods_num || '&nbsp;&nbsp;' }}
							</view>
							<view class="dflex padding-tb-sm">
								<view class="dflex">
									<text class="price">{{ item.goods_price / 100 || 0 }}</text>
								</view>
							</view>
							<!-- + - 购物车数量 -->
							<use-number-box :min="1" :max="item.goods_num || 1" :value="item.select_num"
								:is-max="item.select_num >= item.goods_num" :is-min="item.select_num === 1"
								:index="index" :disabled="item.select_num >= item.goods_num"
								@eventChange="numberChange">
							</use-number-box>
						</view>
					</view>
				</block>
			</view>

			<!-- 02. 底部操作栏 -->
			<view class="action-section dflex w-full bg-main pos-f padding-right">
				<view class="checkbox pos-r h-full dflex-c">
					<view class="padding-lr iconfont"
						:class="{active:allChecked,iconxuanzhongzhuangtai: allChecked, iconweixuanzhongzhuangtai: !allChecked}"
						@click="check('all')"></view>
					<!-- <view class="clear-btn pos-a tac ft-white" :class="{ show: allChecked }" @click="clearCart">清空
					</view> -->
				</view>
				<view class="total-box flex1 tar padding-right-lg">

				</view>
				<button type="primary" class="payment no-border border-radius-lg fs" @click="createOrder">去提货</button>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		computed: {
			...mapState(['member'])
		},
		data() {
			return {
				// 加载更多状态
				loadmoreType: 'nomore',
				// 数据源
				datas: [],
				empty: false,
				hasmore: 0,
				reqdata: {
					rows: 20,
					page: 1
				},
				scrollTop: 0,
				allChecked: false
			};
		},
		watch: {
			datas(e) {
				let empty = e.length === 0;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			}
		},
		onLoad: function() {
			this.loadData();
		},
		onPageScroll(e) {
			this.$refs.usetop.change(e.scrollTop);
		},
		methods: {
			loadData() {
				this.$func.wmzmall.call('cloudStock/getData').then(res => {
					if (res.code == 200) {
						let datas = res.datas.data
						for (var i in datas) {
							datas[i].checked = false;
							datas[i].select_num = 1
							this.datas.push(datas[i])
						}
					}
				});
			},
			// +- 数量
			numberChange(data) {
				let tData = this.datas[data.index];
				tData.select_num = data.number;
			},
			// 选中状态处理
			check(type, index) {
				if (type === 'item') {
					this.datas[index].checked = !this.datas[index].checked;
				} else {
					const checked = !this.allChecked
					this.datas.forEach(item => {
						item.checked = checked;
					})
					this.allChecked = checked;
				}
			},
			createOrder() {
				let selectData = []
				this.datas.forEach(item => {
					// 选中有库存购物车
					if (item.checked && item.goods_num > 0 && item.goods_num >= item.select_num) {
						selectData.push(item)
					}
				})
				if (selectData.length <= 0) {
					this.$api.msg('请选择提货商品')
					return;
				}
				uni.setStorageSync('wmz_pickup_select_data', selectData)
				uni.navigateTo({
					url: '/sub-user/pages/cloudWarehouse/create'
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		min-height: 100%;
	}

	/* 购物车列表项 */
	.cart-item {

		&:last-child {
			margin-bottom: 0;
		}

		.image-wrapper {
			width: 230rpx;
			height: 230rpx;
			flex-shrink: 0;

			image {
				opacity: 1;
			}
		}

		.checkbox {
			top: -16rpx;
			left: -16rpx;
			color: $font-color-disabled;
			line-height: 1;
			font-size: 46rpx;
			padding: 5rpx;
			z-index: 8;
		}

		.disabled {
			color: #fff !important;
			width: 70%;
			height: 70%;
			background-color: rgba(51, 51, 51, 0.5);
		}

		.item-right {
			height: 260rpx;
			overflow: hidden;
		}

		.del-btn {
			bottom: 40rpx;
			right: 30rpx;
			width: 70rpx;
			height: 70rpx;
		}
	}

	/* 底部栏 */
	.action-section {
		z-index: 999;
		bottom: 0;
		height: 100rpx;

		.checkbox {
			.iconfont {
				font-size: 46rpx;
				color: #2C405A;
			}
		}

		.clear-btn {
			left: 100rpx;
			background: #2C405A;
			border-radius: 0 50rpx 50rpx 0;
			padding: 12rpx 0;
			transition: all .2s;

			width: 0;
			opacity: 0;

			&.show {
				width: 120rpx;
				opacity: 1;
			}
		}

		.payment {
			padding: 0 40rpx;
			font-size: $font-base;
			background: $uni-color-primary;
			box-shadow: 1px 2px 5px rgba(217, 60, 93, 0.72)
		}
	}

	/* #ifdef H5 || MP-360 */
	.action-section {
		margin-bottom: 50px;
	}

	/* #endif */
</style>